import "./EditCart.css"
import React, { useState, useEffect } from 'react';
import myAxios from '../../../utils/myAixos.js'
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import {
    Button,
    Cascader,
    Checkbox,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Radio,
    Select,
    Switch,
    TreeSelect,
    Upload,
    message,
} from 'antd';
//和上传有关的想法
const getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
};
//表单
const { RangePicker } = DatePicker;
const { TextArea } = Input;
//多选框
const onChange = (checkedValues) => {
    console.log('checked = ', checkedValues);
};
const options = [
    {
        label: '商场2楼',
        value: '商场2楼',
    },
    {
        label: '大都会健身馆',
        value: '大都会健身馆',
    },

];
const EditCart = () => {
    let location = useLocation();
    console.log("会员卡传参" + location.state.id)
    const navigate = useNavigate()
    const fanhui = () => {
        navigate(-1)
    }
    const onFinish = (values) => {
        console.log("5566677" + values);
        console.log("2345u87421346");
        let myFormData = new FormData()
        myFormData.append("myFile", values.myfile.file.originFileObj)
        myFormData.append("m_class", values.m_class)
        myFormData.append("m_id", location.state.id)
        myFormData.append("m_address", values.m_address)
        myFormData.append("m_teacher", values.m_teacher)
        myAxios({
            url: '/mcarEdit',
            method: 'post',
            data: myFormData
        }).then(res => {
            console.log('获取所有会员卡数据233333', res)
            if (res.status === 200) {
                message.success('获取所有会员卡数据成功')
            }
        }).catch(err => {
            console.log('获取所有会员卡数据2', err)
        })
    }

    const sub = () => {
        console.log("eidt");
    }
    ///////////以下都是头像相关的
    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState();
    const handleChange = (info) => {
        // if (info.file.status === 'uploading') {
        //     setLoading(true);
        //     return;
        // }
        // if (info.file.status === 'done') {
        //     // Get this url from response in real world.
        //     getBase64(info.file.originFileObj, (url) => {
        //         setLoading(false);
        //         setImageUrl(url);
        //     });
        // }
        console.log('%c ======>>>>>>>>', 'color:orange;', 'info', info)
        //判断他的类型和大小
        const isJpgOrPng = info.file.type === 'image/jpeg' || info.file.type === 'image/png' || info.file.type === 'image/jpg';
        if (!isJpgOrPng) {
            return message.error('只能上传 jpeg/jpg/png 图片');
        }
        const isLt2M = info.file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            return message.error('最大只能上传2M的图片');
        }
        //将文件对象转成base64的地址，img才能显示出来
        getBase64(info.file.originFileObj, (url) => {
            setImageUrl(url);
        });

    };
    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div
                style={{
                    marginTop: 8,
                }}
            >
                Upload
            </div>
        </div>
    );
    const customRequest = () => {
        console.log('customRequest 执行了')
    }

    return (
        <div class="boxEditCart">
            {/* 标题 */}
            <div class="titleEditCart">
                <Button onClick={fanhui}>返回</Button>
            </div>
            {/* 表单 */}
            <div class="bodyEditCart">

                <Form
                    onFinish={onFinish}
                    labelCol={{
                        span: 7,
                    }}
                    wrapperCol={{
                        span: 14,
                    }}
                    layout="horizontal"
                    style={{
                        maxWidth: 600,
                    }}
                >
                    <Form.Item label="会员卡名称" name="m_class">
                        <Input placeholder={location.state.m_class} />
                    </Form.Item>
                    <Form.Item label="教练"
                        name="m_teacher"
                    >
                        <Select>
                            <Select.Option


                                options={[
                                    {
                                        value: '从有',
                                        label: '从有',
                                    },
                                    {
                                        value: '小明',
                                        label: '小明',
                                    },
                                    {
                                        value: '小张',
                                        label: '小张',
                                    },
                                ]}
                            ></Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label="支持场馆" name="m_address">
                        <Checkbox.Group options={options} defaultValue={['Pear']} onChange={onChange} />
                    </Form.Item>


                    <Form.Item
                        label="学生头像"
                        name="myfile"
                        rules={[{ required: true, message: '头像必选' }]}
                    >
                        <Upload
                            name="avatar"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            onChange={handleChange}
                            customRequest={customRequest}
                        >
                            {imageUrl ? (
                                <img
                                    src={imageUrl}
                                    alt="avatar"
                                    style={{
                                        width: '100%',
                                    }}
                                />
                            ) : (
                                uploadButton
                            )}
                        </Upload>
                    </Form.Item>


                    <Form.Item label="保存">
                        <Button htmlType="submit" onClick={sub}>保存</Button>
                    </Form.Item>
                </Form>
            </div>

        </div>

    )
}

export default EditCart